/*
 * @Description: js文件 在初始的原生js进行修改
 * @Version: 2.0
 * @Autor: Yu
 * @Date: 2022-01-02 16:48:34
 * @LastEditors: Yu
 * @LastEditTime: 2022-02-20 21:21:48
 */
window.addEventListener('load', () => {
  // 获取元素
  const ipt = document.getElementById('ipt')
  let lis = document.getElementById('lis')
  const empty = document.getElementsByClassName('empty')[0]
  let countTask = 0

  countAll()
  isCheckedAll()
  countDoneTask()
  delAllDoneTask()
  /**
   * @description: 监听输入框的回车按键
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  ipt.onkeydown = (event) => {
    if (event.keyCode == 13) {
      //判断输入的值是否为空
      if (ipt.value.trim() == '')
        return alert('您输入的任务不能为空，请重新输入!')
      const doneChecked = document.getElementById('done')
      doneChecked.checked = false
      empty.style.display = 'none'
      //创建一个任务
      let taskObj = {
        id: getUuid(),
        content: ipt.value,
        done: false,
      }
      //创建节点
      let li = document.createElement('li')
      let input = document.createElement('input')
      input.setAttribute('type', 'checkbox')
      let txt = document.createTextNode(taskObj.content)
      let button = createElementWithTxt('button', '删除')
      li.appendChild(input)
      li.appendChild(txt)
      li.appendChild(button)
      //向节点的后面添加一个任务
      //lis.appendChild(li);
      //向节点的前面添加一个任务
      lis.insertBefore(li, lis.children[0])
      ipt.value = ''
      delToDoList()
      countAll()
      isCheckedAll()
      delAllDoneTask()
    }
  }

  /**
   * @description: 删除一个任务
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function delToDoList() {
    btns = lis.getElementsByTagName('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function (e) {
        if (confirm('确认要删除该任务吗?')) {
          lis.removeChild(this.parentNode)
          btns = lis.getElementsByTagName('button')
          stopPropagation(e)
          if (btns.length === 0) empty.style.display = 'block'
          const checkboxs = lis.getElementsByTagName('input')
          countTask = 0
          for (let i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
              countTask++
            }
          }
          countDoneTask()
          countAll()
          const doneChecked = document.getElementById('done')
          if (btns.length === countTask && btns.length !== 0) {
            doneChecked.checked = true
          } else {
            doneChecked.checked = false
          }
        }
      }
    }
  }

  /**
   * @description: 统计所有的任务的数量
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function countAll() {
    const all = document.getElementsByClassName('all')[0]
    const btns = lis.getElementsByTagName('button')
    all.innerText = btns.length
  }

  /**
   * @description: 统计已完成的任务
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function countDoneTask() {
    const done = document.getElementsByClassName('done')[0]
    done.innerText = countTask
  }

  /**
   * @description: 全选和取消全选
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function isCheckedAll() {
    const doneChecked = document.getElementById('done')
    const checkboxs = lis.getElementsByTagName('input')
    doneChecked.onclick = function () {
      for (let i = 0; i < checkboxs.length; i++) {
        checkboxs[i].checked = this.checked
      }
      if (this.checked) {
        countTask = checkboxs.length
        countDoneTask()
      } else {
        countTask = 0
        countDoneTask()
      }
    }
    for (let i = 0; i < checkboxs.length; i++) {
      checkboxs[i].onclick = function () {
        let flag = true
        countTask = 0
        for (let i = 0; i < checkboxs.length; i++) {
          if (!checkboxs[i].checked) {
            flag = false
            break
          }
        }
        for (let i = 0; i < checkboxs.length; i++) {
          if (checkboxs[i].checked) {
            countTask++
          }
        }
        countDoneTask()
        // 设置全选按钮的状态
        doneChecked.checked = flag
      }
    }
  }

  /**
   * @description: 清除所有已完成的任务
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function delAllDoneTask() {
    let checkboxs = lis.getElementsByTagName('input')
    const delDone = document.getElementById('del_done')
    delDone.onclick = function () {
      if (checkboxs.length === 0) return alert('请添加任务!')
       if (!booleanCheckTask()) return alert('请选择你要删除的任务项!')
         if (confirm('确认要删除所有已完成的任务吗?')) {
           countTask = 0
           for (let i = 0; i < checkboxs.length; i++) {
             if (checkboxs[i].checked) {
               lis.removeChild(checkboxs[i].parentNode)
               i--
             }
           }
           checkboxs = lis.getElementsByTagName('input')
           for (let j = 0; j < checkboxs.length; j++) {
             if (checkboxs[j].checked) {
               countTask++
             }
           }
           countDoneTask()
           btns = lis.getElementsByTagName('button')
           if (btns.length === 0) {
             const doneChecked = document.getElementById('done')
             doneChecked.checked = false
             empty.style.display = 'block'
           }
           countAll()
         }
    }
  }

  /**
   * @description: 判断当前任务列表中是否选择要删除的项 
   * @param {*}
   * @return {*}
   * @author: Yu
   */ 
  function booleanCheckTask() {
    let checkboxs = lis.getElementsByTagName('input')
    let flag = false
    for (let i = 0; i < checkboxs.length; i++) {      
      if (checkboxs[i].checked) {
          flag=true        
      }       
    }
    return flag
  }

  /**
   * @description: 阻止事件冒泡
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function stopPropagation(e) {
    e = e || window.event
    if (e.stopPropagation) {
      //W3C阻止冒泡方法
      e.stopPropagation()
    } else {
      e.cancelBubble = true //IE阻止冒泡方法
    }
  }

  /**
   * @description: 生成唯一id
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  function getUuid() {
    var s = []
    var hexDigits = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    s[14] = '4'
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
    s[8] = s[13] = s[18] = s[23] = '-'
    let uuid = s.join('')
    return uuid
  }

  /**
   * @description: 生成一个带文本的标签
   * @param {*} tagName
   * @param {*} Txt
   * @return {*}
   * @author: Yu
   */
  function createElementWithTxt(tagName, Txt) {
    // 创建元素节点（标签）
    var node = document.createElement(tagName)
    // 创建文本节点
    var oTxt = document.createTextNode(Txt)
    // 将文本节点放到元素节点中
    node.appendChild(oTxt)
    // 返回元素节点
    return node
  }

  /**
   * @description: 去空
   * @param {*} str
   * @return {*}
   * @author: Yu
   */
  function trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, '')
  }
})
